<template>
  <a-modal
    :width="800"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> {{ data ? '编辑' : '新增' }}打卡WIFI </template>
    <a-form ref="formRef" :model="form" autoLabelWidth label-align="right">
      <a-form-item field="name" label="WIFI名称" required show-colon>
        <a-input v-model="form.name" />
      </a-form-item>
      <a-form-item
        field="bssid"
        label="BSSID"
        required
        show-colon
        tooltip="手机登陆微信小程序，在[我的] 页面中点击[通用] 进入页面，点击[BSSID] 即可获取"
      >
        <a-input
          v-model="form.bssid[0]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.bssid[1]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.bssid[2]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.bssid[3]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.bssid[4]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.bssid[5]"
          placeholder="请输入"
          style="width: 90px"
        />
      </a-form-item>
      <a-form-item field="ip" label="IP地址" show-colon>
        <a-input-number
          hide-button
          v-model="form.ip[0]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input-number
          hide-button
          v-model="form.ip[1]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input-number
          hide-button
          v-model="form.ip[2]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input-number
          hide-button
          v-model="form.ip[3]"
          placeholder="请输入"
          style="width: 90px"
        />
      </a-form-item>
      <a-form-item field="mac" label="MAC地址" show-colon>
        <a-input
          v-model="form.mac[0]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.mac[1]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.mac[2]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.mac[3]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.mac[4]"
          placeholder="请输入"
          style="width: 90px"
        />
        <span style="width: 25px; text-align: center">:</span>
        <a-input
          v-model="form.mac[5]"
          placeholder="请输入"
          style="width: 90px"
        />
      </a-form-item>
      <a-form-item field="name" label="WIFI名称" show-colon>
        <div>
          <p>1.可以向公司IT部门询问公司WiFi的BSSID</p>
          <p>
            2.若企业的WiFi有多个，或有WiFi同名，为了保证打卡，请新增所有WiFi
          </p>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import * as Type from '../type';
import { cloneDeep } from 'lodash';
const props = withDefaults(
  defineProps<{
    visible?: boolean;
    data?: Type.Twifi;
  }>(),
  {}
);

const emit = defineEmits(['update:visible', 'upData']);

const form = reactive<Type.Twifi>({
  name: '',
  ip: [],
  mac: [],
  bssid: []
});

watch(
  () => props.data,
  (val) => {
    Object.assign(form, val);
    console.log('Object.assign(form, val)', form, val);
  }
);
const handleOk = () => {
  emit('update:visible', false);
  emit('upData', cloneDeep(form));
  form.name = '';
  form.ip = [];
  form.mac = [];
  form.bssid = [];
};
const handleCancel = () => {
  form.name = '';
  form.ip = [];
  form.mac = [];
  form.bssid = [];
  emit('update:visible', false);
};
</script>
<style lang="less" scoped></style>
